<template>
<div>


    <div v-if=" !showMsg">
        <x-header :left-options="{backText: ''}" class="ret">
            <div class="retTitle">
                {{voucher.seller.name}}
            </div>

        </x-header>
        <div v-if="voucher" class="main">

            <group>
                <cell :title="voucher.mingc">
                    <div>
                        <span style="color: #000">￥{{voucher.zongJe}}</span>
                    </div>
                </cell>
                <cell title="购买数量">
                    <inline-x-number style="display:block; color: #ffa500;" v-if="this.voucher.lingyTj<=0" v-model="number" :min="1" width="50px" button-style="square"></inline-x-number>
                    <inline-x-number style="display:block; color: #ffa500;" v-if="this.voucher.lingyTj>0" v-model="number" :min="1" :max="this.voucher.lingyTj" width="50px" button-style="square"></inline-x-number>
                </cell>
                <cell title="实付金额">
                    <div>
                        <span style="color: red">￥{{(voucher.zongJe*number )| numFilter}}</span>
                    </div>
                </cell>
            </group>
            <div class="div-btn">
                <!-- <x-button class="btn" v-if="!ispay" disabled>活动未开始</x-button> -->
                <x-button class="btn" v-if="!ispay" @click.native="voucherMxPay">提交订单</x-button>
                <x-button class="btn" v-if="ispay" @click.native="wxpay">继续支付</x-button>
                <p v-if="ismsg" class="msgtxt">{{msg}}</p>
            </div>
            
        </div>

    </div>
    <div v-if="showMsg" class="main">
        <msg v-if="showMsg" :icon="icon" :title="msgTitle" description="查看卡劵->我的->优惠券">
                <template slot="buttons">
                    <x-button  type="primary" @click.native="goHome">回到首面</x-button>
                    <!-- <x-button>查看卡劵</x-button> -->
                </template>
            </msg>
    </div>
</div>
</template>
<script>
import { Cell, Group, InlineXNumber, XButton, XHeader, Msg } from "vux";
import { sign, signStr } from "@/assets/js/sign.js";
import { throws } from "assert";
export default {
  components: {
    Cell,
    Group,
    InlineXNumber,
    XButton,
    XHeader,
    Msg
  },
  data() {
    return {
      msg: "",
      voucher: null,
      number: 1,
      maxnum: 0,
      fxrid: 0,
      hyid: 0,
      ismsg: false,
      showMsg: false,
      icon: "success",
      msgTitle: "支付成功",
      ispay: false,
      appId: "",
      timeStamp: "",
      nonceStr: "",
      package: "",
      signType: "",
      paySign: ""
    };
  },
  methods: {
    voucherMxPay() {
      //提交
      // console.log("code");
      let params = sign("/v1/api/voucher/ReceiveVoucher");
      params.append("sjid", this.voucher.seller.id);
      params.append("kajid", this.voucher.id);
      params.append("kajsl", this.number);
      params.append("fxrid", this.fxrid);
      params.append("hyid", this.hyid);
      this.$http
        .post("voucher/ReceiveVoucher", params)
        .then(ret => {
          if (ret.status == 200) {
            var _data = ret.data.resultObject;
            // console.log(ret.data.code);
            var _code = ret.data.code;
            var _msg = ret.data.msg;
            if (_code == 1) {
              this.appId = _data.appId;
              this.timeStamp = _data.timeStamp;
              this.nonceStr = _data.nonceStr;
              this.package = _data.package;
              this.signType = _data.signType;
              this.paySign = _data.paySign;
              this.ispay = true;
              this.wxpay();
            } else {
              this.ismsg = true;
              this.msg = _msg;
              // console.log(_data);
            }
          } else {
            this.$vux.toast.text("请求出错！", "top");
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    wxpay() {
      WeixinJSBridge.invoke(
        "getBrandWCPayRequest",
        {
          appId: this.appId,
          timeStamp: this.timeStamp,
          nonceStr: this.nonceStr,
          package: this.package,
          signType: this.signType,
          paySign: this.paySign
        },
        res => {
          //            alert(JSON.stringify(res));
          //使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。

          if (res.err_msg == "get_brand_wcpay_request:ok") {
            this.showMsg = true;
            this.msgTitle = "支付成功";
            this.icon = "success";
          } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
            this.ismsg = true;
            this.msg = res.err_desc;
          } else if (res.err_msg == "get_brand_wcpay_request:fail") {
            this.ismsg = true;
            this.msg = res.err_desc;
          }
        }
      );
    },goHome(){
      this.$router.replace('/Seller/'+this.$store.getters.getSellerId+'/'+this.$store.getters.getFxrId,);
    }
  },
  filters:{
    numFilter(value) {

  // 截取当前数据到小数点后三位

    let transformVal = Number(value).toFixed(3)

    let realVal = transformVal.substring(0, transformVal.length - 1)

    // num.toFixed(3)获取的是字符串

    return Number(realVal)

  }
  },
  created() {
    this.voucher = this.$route.params.voucher;
    this.fxrid = this.$route.params.fxrid;
    this.hyid = this.$route.params.hyid;
    if (this.fxrid == null || this.fxrid == undefined) {
      this.fxrid = 0;
    }
    if (this.hyid == null || this.hyid == undefined) {
      this.hyid = 0;
    }
    // console.log(this.voucher.lingyTj);
  }
};
</script>



<style scoped lang="less">
.main {
  padding-top: 40px;

  width: 100%;
}
.div-btn {
  margin: 20px;
  .msgtxt {
    text-align: center;
    font-size: 14px;
    width: 100%;
    margin-top: 10px;
  }
}
.btn {
  color: #fff;
  background-color: @theme-color;
}
.ret {
  position: fixed;
  top: 0;
  width: 100%;
  height: 40px;
  z-index: 9999999;
  background-color: #ffffff;
}
.retTitle {
  color: #000;
  font-size: 14px;
}
</style>

